@charset "UTF-8";
@import '../mixins/index.scss';

$componentPrefix: initPrefix();

// 默认是使用 themes/default.scss
//$spacing-h-xl    : 24px !default; // containers
//$spacing-h-lg    : 16px !default; // 一般用于页面  small containers and buttons
//$spacing-h-md    : 12px !default; // 图标和标题间距  Form controls and items
//$spacing-h-sm    : 8px !default; // small items
//$spacing-h-xs    : 4px !default; // more small

// spacings: margin、padding
$paddings:
  ('xs', $ft-spacing-h-xs), ('sm', $ft-spacing-h-sm), ('md', $ft-spacing-h-md), ('df', $ft-spacing-h-df),
  ('lg', $ft-spacing-h-lg), ('xl', $ft-spacing-h-xl);

$paddingDouble: ('tb', 'top', 'bottom'), ('lr', 'left', 'right'), ('tl', 'top', 'left'), ('rb', 'right', 'bottom');

$types: 'margin', 'padding';
$directions: 'top', 'right', 'bottom', 'left';

//ft-margin
#{$componentPrefix}margin {
  margin-left: $ft-spacing-h-lg;
  margin-right: $ft-spacing-h-lg;
}

#{$componentPrefix}padding {
  padding-left: $ft-spacing-h-lg;
  padding-right: $ft-spacing-h-lg;
}

// ft-padding-xs
@each $name, $value in $paddings {
  #{$componentPrefix}padding-#{$name} {
    padding: $value;
  }
}

// ft-margin-xs
@each $name, $value in $paddings {
  #{$componentPrefix}margin-#{$name} {
    margin: $value;
  }
}

@each $directionMultiple, $value1, $value2 in $paddingDouble {
  // ft-padding-tb-xs
  @each $name, $value in $paddings {
    #{$componentPrefix}padding-#{$directionMultiple}-#{$name} {
      padding-#{$value1}: $value;
      padding-#{$value2}: $value;
    }
  }
}

@each $directionMultiple, $value1, $value2 in $paddingDouble {
  // ft-padding-tb-xs
  @each $name, $value in $paddings {
    #{$componentPrefix}padding-#{$directionMultiple}-#{$name} {
      padding-#{$value1}: $value;
      padding-#{$value2}: $value;
    }
  }
}

@each $directionMultiple, $value1, $value2 in $paddingDouble {
  // ft-margin-tb-xs
  @each $name, $value in $paddings {
    #{$componentPrefix}margin-#{$directionMultiple}-#{$name} {
      margin-#{$value1}: $value;
      margin-#{$value2}: $value;
    }
  }
}

@each $type in $types {
  @each $direction in $directions {
    @each $name, $value in $paddings {
      // ft-margin-top-xs
      // ft-padding-top-xs
      #{$componentPrefix}#{$type}-#{$direction}-#{$name} {
        #{$type}-#{$direction}: $value;
      }
    }
  }
}

// 这里先生成一个margin-0 可以让后面的覆盖
#{$componentPrefix}margin-0 {
  margin: 0;
}

#{$componentPrefix}padding-0 {
  padding: 0;
}

@each $direction in $directions {
  #{$componentPrefix}margin-#{$direction}-0 {
    margin-#{$direction}: 0;
  }
  #{$componentPrefix}margin-#{$direction}-0--important {
    margin-#{$direction}: 0 !important;
  }
  #{$componentPrefix}padding-#{$direction}-0 {
    padding-#{$direction}: 0;
  }
  #{$componentPrefix}padding-#{$direction}-0--important {
    padding-#{$direction}: 0 !important;
  }
}

/* #ifndef APP-NVUE */
//@each $type in $types {
//  @each $direction in $directions {
//    @each $name, $value in $paddings {
//      #{$componentPrefix}#{$type}-#{$direction}-#{$name}--not-first + #{$componentPrefix}#{$type}-#{$direction}-#{$name}--not-first {
//        #{$type}-#{$direction} : $value;
//      }
//    }
//  }
//}
/* #endif */
